<template>
  <u-popup
    :show="visible"
    :closeable="true"
    :safeAreaInsetBottom="false"
    round="10"
    @close="$emit('cancel')"
  >
    <view
      class="pl-30 pr-30 pt-90"
      style="padding-left: 30rpx; padding-right: 30rpx; padding-top: 90rpx"
      v-if="product != null"
    >
      <view class="flex" style="display: flex">
        <image
          class="width-160 height-160 shrink0"
          style="width: 160rpx; height: 160rpx; flex-shrink: 0"
          :src="productData.image"
        ></image>
        <view
          class="flex justify-between flex-column ml-20 w-100"
          style="
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            margin-left: 20rpx;
            width: 100%;
          "
        >
          <view
            class="fweigh-600 fsize-34"
            style="font-weight: 600; font-size: 34rpx"
            >{{ productData.name }}</view
          >
          <view
            class="flex justify-between"
            style="display: flex; justify-content: space-between"
          >
            <view
              class="line-red"
              v-if="!productData.isSetMenu"
              style="color: #e54d42"
            >
              <text class="fsize-26" style="font-size: 26rpx">￥</text>
              <!-- <text class="fsize-36 fweigh-600">{{ productData.activityPrice || unitPrice }}</text> -->
              <text
                class="fsize-36 fweigh-600"
                style="font-size: 36rpx; font-weight: 600"
                >{{ getUnitPrice }}</text
              >
              <text
                v-if="productData.FUnitName"
                class="ml-10 fsize-30 line-gray"
                style="color: #aaaaaa; font-size: 30rpx; margin-left: 10rpx"
                >/ {{ productData.FUnitName }}</text
              >
            </view>
            <actions
              v-if="!productData.isSetMenu"
              :number="productData.nums"
              @add="add"
              @minus="minus"
            ></actions>
          </view>
        </view>
      </view>
      <view class="fsize-24 line-gray mt-40 line-height-28 fweight-500">{{
        productData.description || ""
      }}</view>
      <!-- 商品规格start -->
      <scroll-view scroll-y class="scroll-view">
        <!-- 规格 -->
        <block v-if="productData && productData.materials.specList.length > 0">
          <view class="group-name" style="padding: 10rpx 0">规格 </view>
          <view
            class="materials"
            style="
              display: flex;
              flex-wrap: wrap;
              overflow: hidden;
              margin-bottom: 20rpx;
            "
          >
            <view
              v-for="(gvge, index) in productData.materials.specList"
              :key="index"
              class="value"
              :class="{ selected: gvge.is_selected }"
              @tap="changeGvGeSelected(index)"
            >
              {{ gvge.specName }}
            </view>
          </view>
        </block>
        <!-- 加料 -->
        <block v-if="productData && productData.materials.feedList.length > 0">
          <view class="group-name" style="padding: 10rpx 0">加料 </view>
          <view
            class="materials"
            style="
              display: flex;
              flex-wrap: wrap;
              overflow: hidden;
              margin-bottom: 20rpx;
            "
          >
            <view
              v-for="(jl, index) in productData.materials.feedList"
              :key="index"
              class="value"
              :class="{ selected: jl.is_selected }"
              @tap="changeJLSelected(index)"
            >
              {{ jl.name }}
            </view>
          </view>
        </block>
        <!-- 做法 -->
        <block v-if="productData && productData.materials.taskList.length > 0">
          <view class="group-name" style="padding: 10rpx 0">做法 </view>
          <view
            class="materials"
            style="
              display: flex;
              flex-wrap: wrap;
              overflow: hidden;
              margin-bottom: 20rpx;
            "
          >
            <view
              v-for="(task, index) in productData.materials.taskList"
              :key="index"
              class="value"
              :class="{ selected: task.is_selected }"
              @tap="changeTaskSelected(index)"
            >
              {{ task.name }}
            </view>
          </view>
        </block>
      </scroll-view>
      <view class="bottom">
        <view class="add-cart-btn" @tap="addToCart">
          <!-- <text style="margin-right: 10rpx;">
						<text class="fsize-20">原价￥</text>
						<text class="fsize-24">{{getPrice}}</text>
					</text>  style="color: #ed4d4f;"-->
          <text>
            <!-- <text class="fsize-24">{{productData.activityPrice? '加购价': '会员价'}}￥</text> -->
            <text class="fsize-24" style="font-size: 24rpx">￥</text>
            <text>{{ getPrice }}</text>
          </text>
          <text class="ml-10">加入购物车</text>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import Actions from "../actions/actions.vue";
export default {
  name: "ProductPopup",
  components: {
    Actions,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    product: {
      // 传入的数据有规格和当前菜的数据 规格和做法 materials
      type: Object,
      default: () => {},
    },
    materialsOtherData: {
      type: Object,
      default: () => {},
    },
    isVip: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      productData: {},
      number: 1,
    };
  },
  watch: {
    product(val) {
      // 转换数据
      // console.log(val);
      this.productData = JSON.parse(JSON.stringify(val)); // 父传子数据，当前商品数据
      // if (this.productData.nums) return;
      this.$set(this.productData, "nums", 1); // 当前商品动态添加数量
      if (this.productData.materials?.specList.length > 0) {
        this.productData.materials.specList[0].is_selected = true;
      }

      if (this.productData.materials?.feedList.length > 0) {
        this.productData.materials.feedList.forEach(
          (item) => (item.is_selected = false)
        );
      }
      if (this.productData.materials?.taskList.length > 0) {
        this.productData.materials.taskList.forEach(
          (item) => (item.is_selected = false)
        );
      }
      console.log("this.productData :>> ", this.productData);
    },
  },
  computed: {
    // 商品单价
    /*     unitPrice() {
      return this.productData.posPrice;
    }, */
    // 单个商品的总价
    getPrice() {
      const data = this.productData;
      if (data && data.materials) {
        const selectedItems = []; // 用于存储选中的项
        let price = 0;
        for (const spec of data.materials.specList) {
          if (spec.is_selected) {
            price += this.isVip ? spec.vipPrice : spec.posPrice;
          }
        }
        for (const spec of data.materials.feedList) {
          if (spec.is_selected) {
            price += spec.price;
          }
        }
        /*         for (const spec of data.materials.taskList) {
          if (spec.is_selected) {
            price += spec.price;
          }
        } */

        return (price * data.nums).toFixed(2);
      } else return 0;
    },
    getUnitPrice() {
      const data = this.productData;
      if (data && data.materials) {
        const selectedItems = []; // 用于存储选中的项
        let price = 0;
        for (const spec of data.materials.specList) {
          if (spec.is_selected) {
            price += this.isVip ? spec.vipPrice : spec.posPrice;
          }
        }
        for (const spec of data.materials.feedList) {
          if (spec.is_selected) {
            price += spec.price;
          }
        }
        /*         for (const spec of data.materials.taskList) {
          if (spec.is_selected) {
            price += spec.price;
          }
        } */

        return price.toFixed(2);
      } else return 0;
    },
    getProductSelectedMaterials() {
      if (
        this.productData &&
        !this.productData.is_single &&
        this.productData.materials
      ) {
        let materials = [];

        return materials.length ? materials.join("，") : "";
      }
      return "";
    },
  },
  methods: {
    changeGvGeSelected(index) {
      this.productData.materials.specList.forEach((item) => {
        item.is_selected = false;
      });
      this.productData.materials.specList[index].is_selected = true;
      this.productData = {
        ...this.productData,
      };
    },
    changeJLSelected(index) {
      this.productData.materials.feedList[index].is_selected =
        !!!this.productData.materials.feedList[index].is_selected;
      this.productData = {
        ...this.productData,
      };
    },
    changeTaskSelected(index) {
      this.productData.materials.taskList[index].is_selected =
        !!!this.productData.materials.taskList[index].is_selected;
      this.productData = {
        ...this.productData,
      };
    },
    add() {
      this.productData.nums += 1;
    },
    minus() {
      if (this.productData.nums == 1) {
        return;
      }
      this.productData.nums -= 1;
    },
    addToCart() {
      const data = this.productData;
      let vipPrice = 0;
      let posPrice = 0;
      if (data.materials) {
        const selectedItems = []; // 用于存储选中的项
        let price = 0;
        data.materials.specList = data.materials.specList.filter(
          (item) => item.is_selected
        );

        data.materials.feedList = data.materials.feedList.filter(
          (item) => item.is_selected
        );
        data.materials.taskList = data.materials.taskList.filter(
          (item) => item.is_selected
        );
        for (const spec of data.materials.specList) {
          if (spec.is_selected) {
            vipPrice += spec.vipPrice;
            posPrice += spec.posPrice;
          }
        }
        for (const spec of data.materials.feedList) {
          if (spec.is_selected) {
            vipPrice += spec.price;
            posPrice += spec.price;
          }
        }
      }

      const product = {
        ...data,
        vipPrice,
        posPrice,
      };
      // console.log(this.productData);
      this.$emit("add-to-cart", product);
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-cancel {
  padding: 20rpx;
  display: flex;
  justify-content: flex-end;
  opacity: 0.2;
}

.scroll-view {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #777;
  border-top: 1px #ededed solid;
  padding-top: 40rpx;
  margin-top: 40rpx;
  min-height: 1vh;
  max-height: calc(100vh - 100rpx - 426rpx - 250rpx);

  .materials {
    margin-bottom: 20rpx;

    .group-name {
      padding: 10rpx 0;
    }

    .value {
      background-color: #f5f5f7;
      color: 26rpx;
      padding: 10rpx 20rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 12rpx;

      &.selected {
        background-color: #e0a32d;
        color: #fff;
      }
    }
  }
}

.bottom {
  padding: 0 40rpx;
  margin-bottom: 10rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  position: relative;
  z-index: 11;

  .add-cart-btn {
    height: 90rpx;
    line-height: 90rpx;
    margin-top: 20rpx;
    font-size: 30rpx;
    text-align: center;
    font-weight: bold;
    color: #111111;
    background: linear-gradient(34deg, #f3c45d, #edac2f);
    border-radius: 45rpx;
  }
}
</style>
